<template>
	<div class="btns">
		<div class="item" v-for="(item, itemIndex) in menuList" :key="itemIndex" @click="changeBtn(item)">
			<div class="btn" :class="{ active: isItemActive(item) }">
				<div class="arrow"></div>
				<div class="arrow"></div>
				<div class="arrow"></div>
				<div class="arrow"></div>
				<img :src="item.icon" alt="" class="icon" />
				<div class="title">{{ item.title }}</div>
			</div>
			<div class="sub-btns" v-if="item.title == activeBtn?.title && item.children.length > 0">
				<div
					class="btn"
					v-for="(subItem, index) in item.children"
					:key="index"
					@click.stop="changeChildBtn(subItem)"
					:class="{ active: subItem.isActive }"
				>
					<div class="title">{{ subItem.title }}</div>
				</div>
			</div>
		</div>
	</div>
	<Teleport to="body"> <TourGuide v-if="activeBtn?.title == '场景巡游'" /> </Teleport>
</template>
<script lang="ts" setup>

	import { getDevices } from '../../../api/devices'
	import { onMounted, onUnmounted, ref, watch } from 'vue'
	import { zhaji } from './points'
	import { delay, requireImg } from '@/utils/common'
	import { v4 as uuid } from 'uuid'
	import { useRoute } from 'vue-router';
	import TourGuide from './tourGuide/index.vue'
	import {
		isSearchInfo,
		measure,
		viewfield,
		contour,
		clearSearchInfo,
		clearMeasure,
		clearViewfield,
		clearContour,
		demolition,
		exitDemolition,
		isOpenBuilding,
		toggleFloor,
		addEquipmentMarker,
		showMarker,
		showAreas,
		addYongJiMarker3ds,
		addMetroStation,
		addDlpMarker,
		floor as currentFloor,
	} from './index'
	import { useAirCityStore } from '@/stores/aircity'

	const route = useRoute();
	const parentId = ref<any>(1);
	const menuName =  ref<any>("");
	const menuUrl =  ref<any>("");
	const menuList = ref<any>({});

	onMounted(() => {
		parentId.value = route.query.parentId;
		menuName.value = route.query.name;
		menuUrl.value = route.query.url;
		menuList.value = localStorage.getItem("menuinfo")
		if(menuList.value) {
			menuList.value = JSON.parse(menuList.value);
		}
		menuList.value = menuList.value.filter((mnItem: any) => {
			return mnItem.parentId == route.query.parentId
		})

		menuList.value.forEach((fItem: any) => {
			fItem.title = fItem.name
			if(fItem.name == "枢纽分层") {
				fItem.icon = requireImg('global/枢纽分层.png'),
				fItem.children = [
					{
						title: '铁路安检层',
						isActive: false,
					},
					{
						title: '多运输衔接层',
						isActive: false,
					},
				]
			} else if (fItem.name == "功能划分") {
				fItem.icon = requireImg('global/功能划分.png'),
				fItem.children = [
					{
						title: '停车场通道',
						isActive: false,
					},
					{
						title: '铁路出站通道',
						isActive: false,
					},
					{
						title: '枢纽出站',
						isActive: false,
					},
					{
						title: '地铁进站',
						isActive: false,
					},
					{
						title: '地铁出站',
						isActive: false,
					},
					{
						title: '地铁区域',
						isActive: false,
					},
					{
						title: '安检区域',
						isActive: false,
					},
					{
						title: '拥挤区域',
						isActive: false,
					},
				]
			} else if (fItem.name == "重点设备区域") {
				fItem.icon = requireImg('global/重点设备区域.png'),
				fItem.children = [
					{
						// // 1打印机，2自动售票机，3安检机器，4智能监控，5灭火器，6自动扶梯，7车站大屏幕，8温湿度传感器，9导流牌
						id: 1,
						title: '自助打印',
						camera: [12946104.987344, 4844030.776797, 117.809727, -14.012105, -91.49894, -0.000001],
						isActive: false,
					},
					{
						id: 2,
						title: '自动售票机器',
						camera: [12946104.987344, 4844030.776797, 117.809727, -14.012105, -91.49894, -0.000001],

						isActive: false,
					},
					{
						id: 3,
						title: '安检机器',
						camera: [12946107.806875, 4844010.689063, 119.383711, -21.705227, -42.33107, 0.000002],
						isActive: false,
					},
					{
						id: 4,
						title: '智能监控',
						camera: [12946091.135625, 4844015.519766, 119.874307, -7.802425, 26.333599, 0],
						isActive: false,
					},
					{
						id: 5,
						title: '灭火器',
						camera: [12946104.987344, 4844030.776797, 117.809727, -14.012105, -91.49894, -0.000001],
						isActive: false,
					},
					{
						id: 6,
						title: '自动扶梯',
						isActive: false,
						camera: [12946140.4775, 4844013.53375, 134.57459, -23.770636, -78.008705, 0.000001],
					},
					{
						id: 7,
						title: '车站大屏',
						isActive: false,
						camera: [12946038.941406, 4843976.130859, 122.031055, -3.805993, -89.175201, 0],
					},
					{
						id: 8,
						title: '温湿度传感器',
						isActive: false,
						camera: [12946110.127969, 4844015.943359, 121.834873, -3.987567, 8.27597, 0],
					},
					{
						id: 9,
						title: '导流牌',
						isActive: false,
					},
				]
			} else if (fItem.name == "查询分析") {
				fItem.icon = requireImg('global/重点设备区域.png'),
				fItem.children =  [
					{
						title: '点选',
						isActive: false,
					},
					{
						title: '量测',
						isActive: false,
					},
					{
						title: '可视域',
						isActive: false,
					},
					{
						title: '等高面',
						isActive: false,
					},
				]
			} else if (fItem.name == "场景巡游") {
				fItem.icon = requireImg('global/重点设备区域.png')
				fItem.children = []
			}
		})

		console.log("menuList is======= ", menuList.value)

		setTimeout(() => {
			addMetroStation()
		}, 2000)

		getDevices().then(devicesInfo => {
			console.log("devicesInfo", devicesInfo.data.records)
			if(devicesInfo.data.records) {
				localStorage.setItem("devicesInfo", JSON.stringify(devicesInfo.data.records))
			}
		})
	})

	const airStore = useAirCityStore()
	const btns = ref([
		{
			title: '枢纽分层',
			icon: requireImg('global/枢纽分层.png'),
			children: [
				{
					title: '铁路安检层',
					isActive: false,
				},
				{
					title: '多运输衔接层',
					isActive: false,
				},
			],
		},
		{
			title: '功能划分',
			icon: requireImg('global/功能划分.png'),
			children: [
				{
					title: '停车场通道',
					isActive: false,
				},
				{
					title: '铁路出站通道',
					isActive: false,
				},
				{
					title: '枢纽出站',
					isActive: false,
				},
				{
					title: '地铁进站',
					isActive: false,
				},
				{
					title: '地铁出站',
					isActive: false,
				},
				{
					title: '地铁区域',
					isActive: false,
				},
				{
					title: '安检区域',
					isActive: false,
				},
				{
					title: '拥挤区域',
					isActive: false,
				},
			],
		},
		{
			title: '重点设备区域',
			icon: requireImg('global/重点设备区域.png'),
			children: [
				{
					// // 1打印机，2自动售票机，3安检机器，4智能监控，5灭火器，6自动扶梯，7车站大屏幕，8温湿度传感器，9导流牌
					id: 1,
					title: '自助打印',
					camera: [12946104.987344, 4844030.776797, 117.809727, -14.012105, -91.49894, -0.000001],
					isActive: false,
				},
				{
					id: 2,
					title: '自动售票机器',
					camera: [12946104.987344, 4844030.776797, 117.809727, -14.012105, -91.49894, -0.000001],

					isActive: false,
				},
				{
					id: 3,
					title: '安检机器',
					camera: [12946107.806875, 4844010.689063, 119.383711, -21.705227, -42.33107, 0.000002],
					isActive: false,
				},
				{
					id: 4,
					title: '智能监控',
					camera: [12946091.135625, 4844015.519766, 119.874307, -7.802425, 26.333599, 0],
					isActive: false,
				},
				{
					id: 5,
					title: '灭火器',
					camera: [12946104.987344, 4844030.776797, 117.809727, -14.012105, -91.49894, -0.000001],
					isActive: false,
				},
				{
					id: 6,
					title: '自动扶梯',
					isActive: false,
					camera: [12946140.4775, 4844013.53375, 134.57459, -23.770636, -78.008705, 0.000001],
				},
				{
					id: 7,
					title: '车站大屏',
					isActive: false,
					camera: [12946038.941406, 4843976.130859, 122.031055, -3.805993, -89.175201, 0],
				},
				{
					id: 8,
					title: '温湿度传感器',
					isActive: false,
					camera: [12946110.127969, 4844015.943359, 121.834873, -3.987567, 8.27597, 0],
				},
				{
					id: 9,
					title: '导流牌',
					isActive: false,
				},
			],
		},
		{
			title: '查询分析',
			icon: requireImg('global/重点设备区域.png'),
			children: [
				{
					title: '点选',
					isActive: false,
				},
				{
					title: '量测',
					isActive: false,
				},
				{
					title: '可视域',
					isActive: false,
				},
				{
					title: '等高面',
					isActive: false,
				},
			],
		},
		{
			title: '场景巡游',
			icon: requireImg('global/重点设备区域.png'),
			children: [],
		},
	])
	const activeBtn = ref()
	const list = [
		{
			name: '停车场通道',
			coordinates: [
				[492266.621875, 2492825.57625, 5.1584375],
				[492745.0490625, 2493529.8171875, 30.0471875],
				[491983.1196875, 2494410.7062500003, 16.33671875],
				[490686.421875, 2494497.0125, 10.87765625],
				[490126.73, 2493470.65125, 4.98546875],
			],
		},
	]
	const changeBtn = async (item: any) => {
		if (activeBtn.value?.title == item.title) {
			activeBtn.value = null
			return
		}
		activeBtn.value = item
	}

  const isItemActive = (item: any) => {
    return item?.children.some((child: any) => child.isActive);
  }

	watch(activeBtn, async (activeBtn, oldActiveBtn) => {
		//清除当前模块
		if (!activeBtn) {
			let clearfn: any = {
				查询分析: clearAllAnalysis,
				重点设备区域: clearAllMarker,
				枢纽分层: () => {
					clearAllbtn(oldActiveBtn)
					exitDemolition()
				},
				功能划分: clearAllFnAreas,
				场景巡游: () => {
					fdapi.reset(1 | 2)
					fdapi.camera.set([12946565.104062, 4843476.616445, 313.921289, -13.066213, -126.80352, 0.000001], 0)
				},
			}

			clearfn[oldActiveBtn.title] && clearfn[oldActiveBtn.title](oldActiveBtn)

			return
		}
		//进入分层模块判断是否开启拆楼
		if (activeBtn.title == '枢纽分层') {
			if (!isOpenBuilding.value) {
				demolition()
			}
		}

		//离开重点设备区域清除标签
		// if (oldActiveBtn?.title == '重点设备区域') {
		// 	await clearAllMarker(oldActiveBtn)
		// }
	})

	let fn: any = {
		点选: () => (isSearchInfo.value = true),
		量测: measure,
		可视域: viewfield,
		等高面: contour,
		铁路安检层: toggleFloor,
		多运输衔接层: toggleFloor,
		自动售票机器: showMarker,
		安检机器: showMarker,
		智能监控: showMarker,
		自助打印: showMarker,
		车站大屏: showMarker,
		温湿度传感器: showMarker,
		灭火器: showMarker,
		自动扶梯: showMarker,
		导流牌: addDlpMarker,
	}
	let floorEP = [
		{
			name: '多运输衔接层',
			equipments: ['导流牌'],
			area: ['停车场通道', '铁路出站通道', '枢纽出站', '地铁进站', '地铁出站', '地铁区域', '拥挤区域'],
		},
		{
			name: '铁路安检层',
			equipments: [
				'安检机器',
				'智能监控',
				'灭火器',
				'自动售票机器',
				'自助打印',
				'自动扶梯',
				'车站大屏',
				'温湿度传感器',
			],
			area: ['安检区域', '拥挤区域'],
		},
	]
	//图层区域
	let areas = ['停车场通道', '铁路出站通道', '枢纽出站', '地铁进站', '地铁出站', '地铁区域', '拥挤区域']
	let clearFn: any = {
		点选: clearSearchInfo,
		量测: clearMeasure,
		可视域: clearViewfield,
		等高面: clearContour,
	}
	const updateFloor = (floor: any) => {
		btns.value
			.find((_) => _.title == '枢纽分层')!
			.children.forEach((_) => {
				_.isActive = false
				if (_.title == floor.name) {
					_.isActive = true
				}
			})
	}
	const changeChildBtn = async (item: any) => {
		if (item.isActive) {
			if (activeBtn.value?.title == '重点设备区域') {
				fdapi.marker.deleteByGroupId(item.title)
				fdapi.marker.delete('DlpMarker')
			}
			if (activeBtn.value?.title == '枢纽分层') {
				await fdapi.infoTree.show(airStore.GetTreeIdByName(['丰台站_-11_5', '丰台站_0_00', '丰台站_0m上']))
			}
			if (activeBtn.value?.title == '查询分析') {
				await clearAllAnalysis(activeBtn.value)
			}
			if (activeBtn.value?.title == '功能划分') {
				fdapi.infoTree.deleteByGroupId(item.title)
			}
			item.isActive = false
			if (activeBtn.value?.title == '功能划分') {
				showAreas(item)
				fdapi.marker3d.deleteByGroupId('marker3d-yongji')
				await fdapi.marker.deleteByGroupId('kll')
			}
			return
		}
		if (activeBtn.value?.title == '查询分析') {
			await clearAllAnalysis(activeBtn.value)
		}
		if (activeBtn.value?.title == '枢纽分层') {
			clearAllbtn(activeBtn.value)
		}

		item.isActive = true

		//显示区域所在的对应楼层
		if (activeBtn.value?.title == '功能划分') {
			if (!isOpenBuilding.value) {
				await demolition()
				isOpenBuilding.value = true
				await delay(500)
			}
			//先判断当前楼层是否存在该区域
			let flag = floorEP.find((_) => _.name == currentFloor.value)?.area.includes(item.title)
			if (!flag) {
				await fdapi.marker3d.deleteByGroupId('area-marker3d')
				await fdapi.marker3d.deleteByGroupId('marker3d-yongji')
				await fdapi.infoTree.deleteByGroupId('安检区域')
				await fdapi.infoTree.hide(airStore.GetTreeIdByName(areas))
				let floor = floorEP.find((_) => _.area.some((ep) => ep == item.title))!
				activeBtn.value.children.forEach((_: any) => (_.isActive = false))
				btns.value.find((_) => _.title == '重点设备区域')!.children.forEach((_: any) => (_.isActive = false))
				item.isActive = true
				//更新对应楼层按钮active状态
				updateFloor(floor)
				await toggleFloor({ title: floor.name })
				currentFloor.value = floor.name
				await delay(1500)
			}
			if (item.title == '拥挤区域') {
				// addDlpMarker([12946193.92, 4844056.64, 86.48126953125])
				addYongJiMarker3ds(item)
			} else {
				showAreas(item)
			}

			return
		}
		//显示设备所在的对应楼层
		if (activeBtn.value?.title == '重点设备区域') {
			if (!isOpenBuilding.value) {
				await demolition()
				isOpenBuilding.value = true
				await delay(500)
			}
			//先判断当前楼层是否存在该设备
			let flag = floorEP.find((_) => _.name == currentFloor.value)?.equipments.includes(item.title)
			if (!flag) {
				let floor = floorEP.find((_) => _.equipments.some((ep) => ep == item.title))!
				activeBtn.value.children.forEach((_: any) => (_.isActive = false))
				let areas = btns.value
					.find((_) => _.title == '功能划分')!
					.children.map((_: any) => {
						_.isActive = false
						return _.title
					})
				fdapi.infoTree.hide(airStore.GetTreeIdByName(areas))
				item.isActive = true
				//清除功能划分效果
				fdapi.marker3d.deleteByGroupId('area-marker3d')
				fdapi.marker3d.deleteByGroupId('marker3d-yongji')
				fdapi.infoTree.deleteByGroupId('安检区域')
				//更新对应楼层按钮active状态
				updateFloor(floor)
				await fdapi.marker.clear()
				await toggleFloor({ title: floor.name })
				currentFloor.value = floor.name
				await delay(1000)
			}
		}

		fn[item.title](item)
	}
	const clearAllMarker = async (item: any) => {
		item.children.forEach((_: any) => {
			fdapi.marker.deleteByGroupId(_.title)
		})
		clearAllbtn(item)
	}
	const clearAllAnalysis = async (activeBtn: any) => {
		if (!activeBtn) return
		const promises = activeBtn.children.map(async (c: any) => {
			if (c.isActive) {
				c.isActive = false
				return clearFn[c.title] && clearFn[c.title]()
			}
		})
		await Promise.all(promises)
	}
	const clearAllbtn = (activeBtn: any) => {
		if (!activeBtn) return
		activeBtn.children.forEach(async (c: any) => {
			if (c.isActive) {
				c.isActive = false
			}
		})
	}
	const clearAllFnAreas = (item: any) => {
		console.log('item', item)

		if (!item) return
		item.children.forEach(async (c: any) => {
			if (c.isActive) {
				c.isActive = false
				fdapi.infoTree.deleteByGroupId(c.title)
			}
		})
		fdapi.infoTree.hide(airStore.GetTreeIdByName('动态标记'))
		fdapi.marker3d.deleteByGroupId('area-marker3d')
	}
	// drawArea(list)

	// addMarker(
	// 	zhaji.map((_) => ({
	// 		id: 'zhaji' + uuid(),
	// 		groupId: 'zhaji',
	// 		coordinate: _,
	// 		text: '闸机',
	// 	})),
	// )

	onUnmounted(() => {
		fdapi.infoTree.deleteByGroupId('metro-marker')
		fdapi.marker3d.clear()
		fdapi.marker.clear()
		exitDemolition(false)
		fdapi.infoTree.show(airStore.GetTreeIdByName(['丰台站_-11_5', '丰台站_0_00', '丰台站_0m上']))
	})
</script>

<style lang="scss" scoped>
	.btns {
		position: absolute;
		top: 200px;
		right: 100px;
		z-index: 99;
		.item {
			position: relative;
			.btn {
				position: relative;
				display: flex;
				align-items: center;
				padding-left: 20px;

				background: linear-gradient(180deg, #053f71 0%, #053f71 100%);
				box-shadow: inset 0px 0px 10px 0px rgba(2, 171, 255, 0.6);
				min-width: 260px;
				height: 75px;
				box-sizing: border-box;
				.arrow {
					position: absolute;
					background-size: 100% 100%;
					width: 18px;
					height: 10px;
				}
				.arrow:nth-child(1) {
					left: 0;
					top: 0;
					background-image: url(@img/global/left-top-arrow.png);
				}
				.arrow:nth-child(2) {
					left: 0;
					bottom: 0;
					background-image: url(@img/global/left-bottom-arrow.png);
				}
				.arrow:nth-child(3) {
					right: 0;
					top: 0;
					background-image: url(@img/global/right-top-arrow.png);
				}
				.arrow:nth-child(4) {
					right: 0;
					bottom: 0;
					background-image: url(@img/global/right-bottom-arrow.png);
				}
				&.active {
					background: radial-gradient(93% 93% at 0% 0%, #4890ce 0%, #053f71 100%),
						linear-gradient(180deg, #2275bc 0%, #053f71 100%);
				}
			}
			img {
				width: 44px;
				height: 44px;
				margin-right: 10px;
			}
			&:nth-child(n + 2) {
				margin-top: 20px;
			}
		}
		.btn {
			width: 240px;
			height: 75px;
			font-size: 28px;
			background-color: blue;
		}
		.sub-btns {
			position: absolute;
			left: 0;
			top: 0;
			padding: 30px 30px;
			transform: translateX(-110%);
			background: linear-gradient(180deg, rgba(5, 63, 113, 0.6) 0%, rgba(3, 7, 17, 0.6) 100%);

			box-sizing: border-box;
			border: 1px solid #02abff;
			.btn {
				background: linear-gradient(180deg, rgba(53, 150, 216, 0.6) 0%, rgba(6, 95, 155, 0.6) 100%);

				box-sizing: border-box;
				border: 1px solid rgba(84, 181, 234, 0.6);
				display: flex;
				justify-content: center;
				align-items: center;
				&.active {
					background: linear-gradient(180deg, #3596d8 0%, #065f9b 100%);
				}
			}
			.btn:nth-child(n + 2) {
				margin-top: 20px;
			}
		}
	}
</style>
